<template>
  <div class="container flc" :style="{ paddingTop: `${45 + statusBarHeight}px` }">
    <NavBar 
      :navBarStyle="{
        backgroundColor: navBarBg,
        height: `${45 + statusBarHeight}px`,
        paddingTop: `${statusBarHeight}px`,
      }"
      pageName="优惠券"
      @onLeftClick="leftBack" 
    />
    <div class="hb flc">
      <!-- <div class="fls fl vc bg_fff pad_8_20 mb10">
        <div 
          class="change_item"
          :class="queryParams.benefitBatchType == item.value ? 'bg_d1 dx_15' : 'bg_f6 dx_15 color_A9'"
          @click="changeStatus(item.value)"
          v-for="item in benefitBatchTypeList"
          :key="item.value"
        >{{ item.label }}</div>
      </div> -->
      <div class="fls">
        <van-tabs v-model="queryParams.benefitBatchType" @change="changeStatus">
          <van-tab v-for="item in benefitBatchTypeList" :key="item.value" :title="item.label" :name="item.value"></van-tab>
        </van-tabs>
      </div>
      <div class="fl1 flau plr_16" ref="scrollRef">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="mb10" v-for="(item, index) in batchList" :key="item.id">
            <div class="cuuponItem">
              <div class="lose_bg" v-if="item.couponStatus == 20 || item.couponStatus == 25 || item.couponStatus == 28 || item.couponStatus == 30"></div>
              <div class="coupon_tag package_bg" v-if="item.benefitBatchType == 20">权益包</div>
              <div class="coupon_tag coupon_bg" v-if="item.benefitBatchType == 10 && item.couponType == 10">免单券</div>
              <div class="coupon_tag coupon_bg" v-if="item.benefitBatchType == 10 && item.couponType == 20">折扣券</div>
              <div class="coupon_tag coupon_bg" v-if="item.benefitBatchType == 10 && item.couponType == 30">代金券</div>
              <!-- 优惠券 -->
              <div class="fl vc coupon_header" v-if="item.benefitBatchType == 10">
                <div class="fl1">
                  <div class="coupon_title">{{ item.title }}</div>
                  <p class="coupon_time" v-if="item.benefitBatchType == 10 && item.invalidType == 10">{{ item.invalidTime ? timeStampToTime(item.invalidTime, 'Y-m-d H:i') : '-' }} 到期</p>
                  <p class="coupon_time" v-if="item.benefitBatchType == 10 && item.invalidType == 20">领取后{{ item.validDays }}天失效</p>
                  <div class="fl vc dx_12 mt5">
                    <p class="color_A9 mr10 lh_12">已发放/剩余：</p>
                    <p class="color_A9 mr lh_12">{{ item.grantNum}}&nbsp;/&nbsp;{{item.totalNum === 0 ? '∞' : item.totalNum - item.grantNum}}</p>
                    <div class="fl vc lh_12" v-if="item.couponStatus != 20 && item.couponStatus != 25 && item.couponStatus != 28 && item.couponStatus != 30" :class="
                      item.batchStatus == 10
                        ? 'color_success'
                        : item.batchStatus == 30
                        ? 'color_fail'
                        : item.batchStatus == 0
                        ? 'color_warning'
                        : 'color_cancel'
                      "><p class="mr5">●</p>{{ formatterStatus(item.batchStatus, statusOptions) }}</div>
                  </div>
                </div>
                <div class="flc vend fls pdl_10">
                  <div class="color_red dx_30 ct" v-if="item.couponType == 10">免单</div>
                  <div class="fl vend" v-if="item.couponType == 20">
                    <span class="color_red dx_32 ct">{{ item.discountAmount / 10 }}</span>
                    <span class="color_red dx_14 ct">折</span>
                  </div>
                  <div class="fl vend" v-if="item.couponType == 30">
                    <span class="color_red dx_14 ct">￥</span>
                    <span class="color_red dx_32 ct">{{ formatPriceFloat(item.discountAmount, 'int') }}</span>
                    <span class="color_red dx_20 ct">{{ formatPriceFloat(item.discountAmount, 'float') }}</span>
                  </div>
                  <span class="color_c2 dx_11 mt_6">无门槛</span>
                </div>
              </div>
              <!-- 权益包 -->
              <div class="fl vstart bt coupon_header" v-if="item.benefitBatchType == 20">
                  <div class="fl vc">
                    <img class="studio_icon fls" src="@/assets/images/studio_icon.png">
                    <div class="fl1">
                        <div class="coupon_title">{{ item.title }}</div>
                        <div class="fl vc dx_12 mt5">
                          <p class="color_A9 mr10 lh_12">已发放/剩余：</p>
                          <p class="color_A9 mr lh_12">{{ item.grantNum }} / ∞</p>
                        </div>
                    </div>
                  </div>
                  <!-- <div class="fl vc fls pdl_10">
                      <span class="color_red dx_14 ct">￥</span>
                      <span class="color_red dx_32 ct">{{ formatPriceFloat(item.salePrice, 'int') }}</span>
                      <span class="color_red dx_20 ct">{{ formatPriceFloat(item.salePrice, 'float') }}</span>
                  </div> -->
              </div>

              <div class="fl vstart" @click="handleExpand(index)">
                <div class="fl1 pdr_15 coupon_desc" :class="item.isExpand ? 'is_expand' : ''">{{ item.desc }}</div>
                <div class="fls fl vstart">
                  <img class="expand_icon rotate_icon" :class="item.isExpand ? 'rotate_top' : ''" src="@/assets/images/icon_rotate.png">
                  <div v-if="item.couponStatus == 20 || item.couponStatus == 25 || item.couponStatus == 28 || item.couponStatus == 30">
                    <img class="hover-icon" src="https://osslarp.you-drama.com/pingxingshu/use_icon.png" v-if="item.couponStatus == 20">
                    <img class="hover-icon" src="https://osslarp.you-drama.com/pingxingshu/lose_icon.png" v-if="item.couponStatus == 25 || item.couponStatus == 28 || item.couponStatus == 30">
                  </div>
                  <div class="pdl_10" v-if="item.benefitBatchType == 20 || ((item.batchStatus == 10 && item.benefitBatchType == 10 && (item.totalNum === 0 || item.totalNum > item.grantNum)) && item.couponStatus != 20 && item.couponStatus != 25 && item.couponStatus != 28 && item.couponStatus != 30)">
                    <p class="coupon_grant_btn flvcc" @click.stop="goGrant(item)">发放</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <CouoponGrant :navigationHeight="navigationHeight" :statusBarHeight="statusBarHeight" ref="CouoponGrant" @refresh="resetSearch()"></CouoponGrant>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue'
import CouoponGrant from './components/CouponGrant.vue'
import { List, Tab, Tabs } from 'vant';
import { navOtherHeight } from '@/config/config'
import { formatterStatus, fnOmit, formatPriceFloat, timeStampToTime } from '@/utils/util'
import { getBatchList } from '@/api/coupon.js'

export default {
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    NavBar,
    CouoponGrant
  },

  data() {
    return {
      formatterStatus,
      fnOmit,
      formatPriceFloat,
      timeStampToTime,
      navBarBg: 'transparent',
      navigationHeight: 47,
      statusBarHeight: 0,
      navOtherHeight,
      benefitBatchTypeList: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 10,
          label: '我的优惠券'
        },
        {
          value: 20,
          label: '我的权益包'
        },
      ],
      statusOptions: [
        {
          value: 0,
          label: '待审核'
        },
        {
          value: 5,
          label: '审核中'
        },
        {
          value: 10,
          label: '使用中'
        },
        {
          value: 25,
          label: '已作废'
        },
        {
          value: 30,
          label: '已拒绝'
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        issuanceType: 10,
        benefitBatchType: null
      },
      loading: true,
      finished: false,
      batchList: []
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.queryParams.benefitBatchType = null
        this.getBatchList()
      }
    }
  },

  created() {
    this.getAPPNavHeight()
    if (this.$store.state.token) {
      this.queryParams.benefitBatchType = null
      this.getBatchList()
    }
  },

  methods: {
    
    onLoad() {
      console.log('到底')
      this.queryParams.pageNum += 1
      this.queryParams.benefitBatchType = this.queryParams.benefitBatchType === 0 ? null : this.queryParams.benefitBatchType
      this.getBatchList()
    },

    resetSearch() {
      this.queryParams.pageNum = 1
      this.queryParams.benefitBatchType = this.queryParams.benefitBatchType === 0 ? null : this.queryParams.benefitBatchType
      this.getBatchList()
    },

    // 切换优惠券类型
    changeStatus(val) {
      // console.log(val)
      this.queryParams.benefitBatchType = val === 0 ? null : val
      this.queryParams.pageNum = 1
      this.$refs.scrollRef.scrollTop= 0
      this.getBatchList()
    },

    handleExpand (index) {
      this.batchList[index].isExpand = !this.batchList[index].isExpand
    },

    goGrant(item) {
      this.$refs.CouoponGrant.initData(item)
    },

    leftBack () {
      console.log('点击了', window)
      if (window.androidJSBridge) {
        window.androidJSBridge.back()
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.back.postMessage({})
      }
    },

    getAPPNavHeight () {
      console.log('--appNavigation--', window)
      if (window.androidJSBridge) {
        const result = JSON.parse(window.androidJSBridge.appNavigation())
        this.navigationHeight = result.navigationHeight
        this.statusBarHeight = result.statusBarHeight
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
        console.log('android1', result)
      } else if (window.webkit) {
        console.log('ios-appNavigation')
        window.appNavigation = this.onAppNavigation
        window.webkit.messageHandlers.appNavigation.postMessage({})
      } else {
        this.navigationHeight = 0
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
      }
    },

    onAppNavigation (result) {
      console.log('ios--appNavigation', result)
      this.navigationHeight = Number(result.navigationHeight)
      this.statusBarHeight = Number(result.statusBarHeight)
      document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
    },

    // 获取批次列表
    async getBatchList () {
      try {
        const params = {
          request: {
            ...this.queryParams
          }
        }
        const res = await getBatchList(params)
        console.log('批次列表', res)
        if (res.errorCode === 0) {
          if (res.response.records.length) {
            res.response.records.forEach(el => {
              const nowTime = new Date().getTime()
              if (nowTime > el.invalidTime && el.benefitBatchType == 10) el.couponStatus = 25
              el.isExpand = false
            });
            this.batchList = this.queryParams.pageNum > 1 ? [...this.batchList, ...res.response.records] : res.response.records
          }
          else {
            this.batchList = this.queryParams.pageNum > 1 ? this.batchList : res.response.records
          }
          if (res.response.records.length < this.queryParams.pageSize) {
            this.finished = true
            this.loading = true
          } else {
            this.finished = false
            this.loading = false
          }
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.container {
  height: calc(100vh - var(--navHeight));
  .van-tabs {
    margin-bottom: 10px;
  }
  .van-tabs__nav {
    background: transparent;
  }
  .van-tab__text--ellipsis {
    color: #8C8C8C;
    font-size: 14px;
  }
  .van-tabs__line {
    background-color: #131419;
    height: 2px;
  }
  .van-tab--active .van-tab__text--ellipsis {
    color: #131419;
    font-size: 16px;
    font-weight: 600;
  }
}
.pad_10_16 {
  padding: 10px 16px;
}
.pad_8_20 {
  padding: 8px 20px;
}
.pad_12 {
  padding: 12px;
}

.pdl_12 {
  padding-left: 12px;
}

.cuuponItem{
  width: 100%;
  position: relative;
  background: #fff;
  padding: 20px 15px 8px 15px;
  /* border: 1rpx solid #D3D3D3; */
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.10);
}
.lose_bg {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.coupon_tag {
  padding: 2px 6px;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
}
.package_bg {
  background: linear-gradient(99deg, #F9B745 5.55%, #FFE86D 88.96%);
}
.coupon_bg {
  background: linear-gradient(105deg, #FC792A 14.02%, #FF3FA2 60.46%);
}

.coupon_header {
  padding-bottom: 10px;
  border-bottom: 1px dashed #E9E9E9;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.coupon_title {
  color: #131419;
  font-size: 16px;
  font-weight: 600;
}
.coupon_time {
  color: #5B554C;
  font-size: 12px;
  margin-top: 4px;
}

.dx_11 {
  font-size: 11px;
}
.color_red {
  color: #FF6969;
  line-height: 1;
}
.color_c2 {
  color: #C26448;
}
.mt_6 {
  margin-top: 6px;
}
.pdr_15 {
  padding-right: 15px;
}

.studio_icon {
  width: 50px;
  height: 50px;
  display: block;
  margin-right: 12px;
}
.studio-tag {
  margin-top: 4px;
  display: inline-flex;
  border: 1rpx solid #D4AB19;
  border-radius: 16px;
  color: #D4AB19;
  padding: 6px 8px;
  font-size: 12px;
}
.studio-tag-icon {
  width: 12px;
  height: 12px;
  display: block;
  margin-right: 4px;
}

.expand_icon {
  width: 16px;
  height: 16px;
  display: block;
}
.coupon_desc {
  color: #999;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is_expand {
  white-space: normal;
  overflow: visible;
}
.rotate_icon {
  transition: all 0.3s;
}
.rotate_top {
  transform: rotate(180deg);
}

.lh_12 {
  line-height: 12px;
}

.hover-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.coupon_grant_btn {
  width: 48px;
  height: 24px;
  background: #FF6969;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
}


</style>
